<template>
  <div id="HomeBottom" ref="HomeBottom">
    <div class="pc">
      <div class="bottomBar" v-if="!isPhone">
        <p class="bottomFont address">
          Copyright © 2022 海南原上区块链科技有限公司 All Rights Reserved.
        </p>
        <p class="bottomFont address">
          <span @click="linkTo" class="number">琼ICP备18003326号-3</span>
          增值电信业务经营许可证：琼B1.B2-20180413 艺术品经营单位备案：468900180006
        </p>
        <!-- <p class="bottomFont beian">
          <img src="@/assets/images/pc_black/icons/icon_beian.png" alt="" />
          琼公网安备 46902302000664号
        </p> -->
        <div class="newBottom">
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=46902302000664"
          >
            <img src="@/assets/images/pc_black/icons/icon_beian.png" />
            <p>琼公网安备 46902302000664号</p>
          </a>
        </div>
        <div class="bottomFont forthLine">
          国家网信办区块链信息服务备案编号 琼网信备46902322799867230011号
        </div>
      </div>
    </div>
    <div class="phone" v-if="isPhone && isShowTab">
      <mobile-footer />
    </div>
  </div>
</template>

<script>
import MobileFooter from "../layout/MobileFooter.vue";
import { getWidth } from "@/utils";
export default {
  components: { MobileFooter },
  name: "HomeBottom",
  data() {
    return {
      currentWidth: "",
      isPhone: false,
      isShowTab: false
    };
  },
  watch: {
    $route: "getTab"
  },
  methods: {
    getTab() {
      let path = this.$route.name;
      if (
        path == "Home" ||
        path == "ProductItem" ||
        path == "PersonalCenter" ||
        path == "AlbumItem"
      ) {
        this.isShowTab = true;
      } else {
        this.isShowTab = false;
      }
    },
    linkTo() {
      window.open("https://beian.miit.gov.cn/#/Integrated/index", "_blank");
    }
  },
  mounted() {
    this.getTab();
    this.currentWidth = getWidth();
    if (this.currentWidth <= 768) {
      this.isPhone = true;
    } else {
      this.isPhone = false;
    }
    let that = this;
    window.onresize = function() {
      if (that.$refs.HomeBottom) {
        that.currentWidth = getWidth();
        if (that.currentWidth <= 768) {
          that.isPhone = true;
        } else {
          that.isPhone = false;
        }
      }
    };
  }
};
</script>

<style lang="less" scoped>
#HomeBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  p {
    margin: 0;
  }

  .pc {
    width: 100%;
    height: 142px;

    .bottomBar {
      user-select: none;
      width: 100%;
      height: 142px;
      background: #171818;
      border-top: 1px solid rgba(46, 47, 47, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .bottomFont {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        text-align: center;
      }

      .address {
        margin-bottom: 15px;
      }

      .beian {
        img {
          transform: translateY(-2px);
        }
      }

      .number {
        cursor: pointer;
      }
    }

    .newBottom {
      width: 300px;
      margin: 0 auto;
      margin-bottom: 7px;
      // padding: 20px 0;

      a {
        display: inline-block;
        text-decoration: none;
        height: 20px;
        line-height: 20px;

        img {
          float: left;
        }

        p {
          float: left;
          height: 20px;
          line-height: 20px;
          margin: 0 0 0 5px;
          color: #939393;

          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          text-align: center;
        }
      }
    }

    .forthLine {
    }
  }

  .phone {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  #HomeBottom {
    .pc {
      display: none;
    }

    .phone {
      height: 174px;
      display: block;
    }
  }
}
</style>
